<template>
    <div id="personBoxBg">
      <div id="personCon">
        <div id="BoxTit">
          <span>成员管理</span>
          <i @click="closeJoinerList">×</i>
        </div>
        <div id="sliderTit">
          <span :class="sliderAct===0?'on':''" @click="changeSlider(0)">已确认({{listActivitiyUserNum}})</span>
          <span :class="sliderAct===1?'on':''" @click="changeSlider(1)">未确认({{listUnAuditingUserNum}})</span>
        </div>
        <div id="sliderList" v-show="sliderAct === 0" ref="sliderList">
          <el-collapse accordion>
            <el-collapse-item v-for="(item, index) in joinerList['listActivitiyUser']">
              <template slot="title">
                <div class="personInfo">
                  <img :src="item['imgUrl']+'?x-oss-process=image/resize,m_fill,h_40,w_40,limit_0'" alt="" class="personHead">
                  <span :style="item['isMaster']===1?creater:joiner" class="tag">{{item['isMaster']===1?'创建者':'成员'}}</span>
                  <span class="name">{{item['nickName']}}</span>
                  <p>({{item['userCount']}}大{{item['userCountChild']}}小)</p>
                  <p class="desc">
                    <span>备注:</span>
                    {{limitworld((item['remark'] === "" || item['remark'] === null)?"无":item['remark'],25,'...')}}
                  </p>
                </div>
              </template>
              <div class="joinerInfo">
                <div class="joinerBase">
                  <span>{{item['realName']}}</span>
                  <span>{{item['phoneNum']}}</span>
                  <span>{{item['userCount']}}大{{item['userCountChild']}}小</span>
                </div>
                <div class="joinerDesc">
                  备注:{{(item['remark'] === "" || item['remark'] === null)?"无":item['remark']}}
                </div>
              </div>
              <div class="Btn">
                <span v-if="item['isMaster']===0" @click="removeUser(index, item['userID'])">踢除成员</span>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div id="sliderList" v-show="sliderAct === 1" ref="sliderList">
            <div>
              <el-collapse accordion>
                <el-collapse-item v-for="(item, index) in joinerList['listUnAuditingUser']">
                  <template slot="title">
                    <div class="personInfo">
                      <img :src="item['imgUrl']" alt="" class="personHead">
                      <span :style="noSure" class="tag">未确认</span>
                      <span class="name">{{item['nickName']}}</span>
                      <p>({{item['userCount']}}大{{item['userCountChild']}}小)</p>
                      <p class="desc">
                        <span>备注:</span>
                        {{limitworld((item['remark'] === "" || item['remark'] === null)?"无":item['remark'],25,'...')}}
                      </p>
                    </div>
                  </template>
                  <div class="joinerInfo">
                    <div class="joinerBase">
                      <span>{{item['realName']}}</span>
                      <span>{{item['phoneNum']}}</span>
                      <span>{{item['userCount']}}大{{item['userCountChild']}}小</span>
                    </div>
                    <div class="joinerDesc">
                      备注:{{(item['remark'] === "" || item['remark'] === null)?"无":item['remark']}}
                    </div>
                  </div>
                  <div class="Btns">
                    <span class="yes btn" @click="enableUser(index,item['userID'],1)">同意</span>
                    <span class="no btn" @click="enableUser(index,item['userID'],0)">拒绝</span>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
        </div>
      </div>
    </div>
</template>

<script>
  import Utils from '../assets/Util'
  export default {
    name: 'personList',
    props:{
      isMaster:Number
    },
    data(){
      return {
        sliderAct:0,
        creater:"color:#FAA915;border:1px solid #FAA915;",
        joiner:"color:#57B38F;border:1px solid #57B38F;",
        noSure:"color:#F45454;border:1px solid #F45454",
        'listActivitiyUserNum':0,
        'listUnAuditingUserNum':0,
        joinerList:[],
        enableData:{
          "token": "",
          "activityID": this.$route.query.id,
          "userID": 0,
          "disabled": 0,
          "remark": ""
        }
      }
    },
    watch: {
      joinerList: {
        handler (curVal, oldVal) {
          this.listActivitiyUserNum = curVal.listActivitiyUser.length;
          this.listUnAuditingUserNum = curVal.listUnAuditingUser.length;
        },
        deep: true
      }
    },
    mounted(){
      if (this.isMaster === 1){
        this.getJoinerList();
      }
    },
    methods:{
      changeSlider(n){
        this.sliderAct = n;
      },
      // 请求参与者列表
      getJoinerList(){
        let that = this;
        let props = {
          url:"/Activity/GetActivityParticipants",
          data:{
            "userID": localStorage.getItem("uId"),
            "activityID": this.$route.query.id
          },
          sCallBack:res => {
            if (res.data.code === 1){
              this.joinerList = res.data.data;
              this.listActivitiyUserNum = this.joinerList.listActivitiyUser.length;
              this.listUnAuditingUserNum = this.joinerList.listUnAuditingUser.length;
            }else{
              this.$message.error("请求失败,稍后再试");
            }
          },
          eCallBack:err => {
            console.log(err);
          }
        }
        Utils.myRequest(props);
      },
      closeJoinerList(){
        this.$emit("closePersonList");
      },
      // 限制显示字数
      limitworld(worlds, wordlength, mark) {
        if (worlds == null || worlds === ""){
          return "";
        }else{
          var nowLength = worlds.length;
          var newWorlds = "";
          if (nowLength > wordlength) {
            newWorlds = worlds.substr(0, wordlength) + mark;
          } else {
            newWorlds = worlds;
          }
          return newWorlds;
        }
      },
      // 踢除成员
      removeUser(index, uId){
        this.$confirm('此操作将踢除改成员, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.removeUserFun(index, uId);
        }).catch(() => {});
      },
      removeUserFun(index, uId){
        let that = this;
        let props = {
          url:"/Activity/RemoveUser",
          data:{
            "token": localStorage.getItem('token'),
            "activityID": this.$route.query.id,
            "userID": uId,
            "remark": ""
          },
          sCallBack:res => {
            if (res.data.code === 1){
              that.$message.success("踢除成功");
              that.joinerList['listActivitiyUser'].splice(index, 1);
            } else if(res.data.code === 4){
              that.refreshToken(that.removeUserFun(index, uId));
            }else{
              that.$message.error("踢除失败，请稍后再试");
            }
          },
          eCallBack:err => {
            console.log(err);
          }
        };
        Utils.myRequest(props);
      },
      // 刷新token
      refreshToken(callBack){
        let refresh = {
          url:"/user/GetToken",
          data:{
            token:localStorage.getItem('token')
          },
          sCallBack:(res) => {
            localStorage.setItem("token", res.data.data)
            callBack && callBack();
          },
          eCallBack:(err) => {
            console.log(err);
          }
        }
        Utils.myRequest(refresh);
      },
      // 同意加入
      enableUser(index, uId, state){
        let that = this;
        if(state === 1){
            this.enableUserFun(index, uId, state);
        }else{
          this.$prompt('请输入拒绝理由', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }).then(({ value }) => {
              that.enableData.remark = value;
              that.enableUserFun(index, uId, state);
          }).catch(() => {});
        }
      },
      enableUserFun(index, uId, state){
        let that = this;
        this.enableData.token = localStorage.getItem('token');
        this.enableData.userID = uId;
        this.enableData.disabled = state
        let props = {
            url:"/Activity/EnableUser",
            data:this.enableData,
            sCallBack:res => {
              if(res.data.code === 1){
                if(state === 1){
                  that.joinerList.listActivitiyUser.push(that.joinerList.listUnAuditingUser[index]);
                  that.joinerList.listUnAuditingUser.splice(index, 1);
                }else{
                  that.joinerList.listUnAuditingUser.splice(index, 1);
                }
              }else if(res.data.code === 4){
                that.refreshToken(that.enableUserFun(index, uId, state));
              }else{
                that.$message.error("操作失败,稍后再试");
              }
            },
            eCallBack:err => {
              console.log(err);
            }
        };
        Utils.myRequest(props);
      }
    }
  }
</script>

<style scoped>
#personBoxBg{
  width:100%;
  height: 100%;
}
#personCon{
  width:100%;
  height:100%;
  background:#fff;
}
#BoxTit{
  width:100%;
  height:40px;
  background:#119C5B;
  color:#fff;
  text-indent:20px;
  font-size:16px;
  line-height: 40px;
  position: relative;
}
#BoxTit i{
  position: absolute;
  width:40px;
  height:40px;
  font-style: normal;
  display: inline-block;
  top:0px;
  right:0px;
  cursor:pointer;
  font-size:20px;
}
#sliderTit{
  width:100%;
  font-size: 0px;
  background:#F1F3F4;
}
#sliderTit span{
  display: inline-block;
  width:50%;
  font-size:14px;
  text-align: center;
  height:40px;
  line-height: 40px;
  cursor:pointer;
}
#sliderTit span.on{
  background:#fff;
}
#sliderList{
  width:100%;
  margin:0 auto;
  height:410px;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
}
.personInfo{
  display: flex;
}
.personInfo .personHead{
  width:40px;
  height:40px;
  border-radius: 50%;
  margin-top:4px;
  margin-left: 10px;
}
.personInfo .name{
  margin-left:10px;
}
.personInfo p{
  margin:0 10px;
}
.personInfo .desc{
  color:#999;
}
.tag{
  text-align:center;
  width:50px;
  padding:5px 0;
  line-height:25px;
  height: 25px;
  margin: 6px 0px 0px 10px;
  border-radius: 3px;
}
.joinerInfo{
  background:#eee;
  padding:10px;
}
.joinerBase{
  margin-top:15px;
}
.joinerBase span{
  margin:0 15px;
}
.joinerBase span:first-child{
  margin-left:0px;
}
.joinerDesc{
  line-height:35px;
  color:#999;
}
.Btn,.Btns{
  margin-top:20px;
  overflow: hidden;
}
.Btn span{
  color:#fff;
  background:#F45454;
  padding:8px 15px;
  font-size:12px;
  float:right;
  border-radius:3px;
  cursor: pointer;
}
.Btns {
  display: flex;
  justify-content: flex-end;
}
.Btns .btn{
  width:40px;
  height:30px;
  text-align: center;
  line-height: 30px;
  color:#fff;
  font-size:12px;
  display: inline-block;
  cursor: pointer;
}
.Btns .yes{
  background:#FAA915;
}
.Btns .no{
  background:#F45454;
  margin-left:15px;
}
</style>
